<template>
<!--客户流失暂缓-->
  <el-dialog v-model="defer" width="850px" :before-close="handleClose">
    <h3 style="margin-bottom: 20px;margin-left: 300px">客户管理-暂缓措施维护</h3>
    <div class="defer-1">
      <div class="defer-1-1">
        <span>客户名称</span>
        <el-input v-model="Lose.name" style="width: 250px" :disabled="true"></el-input>
      </div>
      <div class="defer-1-1">
        <span>客户编号</span>
        <el-input v-model="Lose.khno" style="width: 250px" :disabled="true"></el-input>
      </div>
      <div class="defer-1-1">
        <span>流失原因</span>
        <el-input v-model="Lose.lossReason" style="width: 250px"></el-input>
      </div>
      <el-button type="success" style="width: 82px;margin-left: 100px;margin-top: 15px" @click="updateLossReason">确定</el-button>
      <el-button type="primary" style="width: 82px;margin-top: 15px" @click="defer = false">取消</el-button>
    </div>
    <!--客户订单表-->
    <div class="defer-2">
      <el-button type="primary" style="margin: 15px;background-color: #366CB3" @click="addCustomerReprieve = true">
        <el-icon size="20px">
          <upload-filled />
        </el-icon>
        <span style="margin-left:5px">添加暂缓</span>
      </el-button>
      <el-button type="primary" style="margin: 15px" @click="lose">
        <el-icon size="20px">
          <remove />
        </el-icon>
        <span style="margin-left:5px">确定流失</span>
      </el-button>
      <el-button type="warning" style="margin: 15px" @click="temporary">
        <el-icon size="20px">
          <remove />
        </el-icon>
        <span style="margin-left:5px">暂缓流失</span>
      </el-button>
      <el-table :data="customer_reprieve" border style="width: 100%; opacity: 0.7;" :header-cell-style="{textAlign: 'center'}"
                v-loading="loading"
                element-loading-text="正在加载营销机会表数据"
                :cell-style="{ textAlign: 'center' }">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column fixed label="编号" prop="id" width="100"></el-table-column>
        <el-table-column label="暂缓措施" prop="measure" width="180"></el-table-column>
        <el-table-column label="创建时间" prop="createDate" width="170"></el-table-column>
        <el-table-column label="更新时间" prop="updateDate" width="170"></el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template #default="xxx">
            <el-tooltip placement="top">
              <template #content>删除措施</template>
              <el-button size="mini" type="danger" circle @click="deleteReprieve(xxx.row)">
                <el-icon>
                  <delete />
                </el-icon>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页控件 -->
      <el-pagination background layout="total, prev, pager, next, jumper" :current-page="no" :page-size="size"
                     :total="total" @current-change="currentChange">
      </el-pagination>
    </div>

    <!--添加计划项-->
    <el-dialog width="27%" title="" v-model="addCustomerReprieve" destroy-on-close :before-close="handleClose">
      <div class="add-zh">
        <h2 style="padding: 10px 90px">暂缓措施-添加暂缓数据</h2>
        <div class="add-zh-1">
          <span>计划内容</span>
          <el-input placeholder="请输入暂缓措施" v-model="Reprieve.measure" style="width: 250px"></el-input>
        </div>
        <el-button type="success" style="width: 82px;height: 44px;margin-left: 100px;margin-top: 10px" @click="addReprieve">确定添加</el-button>
        <el-button type="primary" style="width: 82px;height: 44px;margin-top: 10px" @click="addCustomerReprieve = false">取消</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {getCustomerReprievePageInfo,lose,addCustomerReprieve,temporary,delReprieve} from "../../../../network/marlose";
import {ElMessage} from "element-plus";
import {h} from "vue";
import {updateCustomer} from "../../../../network/marcustomer";

export default {
  name: "LoseForm",
  emits:['refresh-data'],
  data() {
    return {
      loading: false,
      //添加暂缓数据
      addCustomerReprieve:false,
      //添加暂缓
      defer:false,
      //客户流失
      Lose:{
        id:null,//id
        khno:null,//客户编号
        name:null,//客户姓名
        //流失原因
        lossReason: [
          {
            value: 0,
            label: '未流失',
          },
          {
            value: 1,
            label: '暂缓流失',
          },
          {
            value: 2,
            label: '确定流失',
          },
        ],
        value_lossReason: null,
      },
      //暂缓措施数据添加
      Reprieve:{
        measure: null,
      },
      //客户流失暂缓表
      customer_reprieve:[],
      no: 1,
      size: 2,
      total: 0,
    }
  },
  methods:{
    //关闭前的回调
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
    },
    //修改流失原因
    updateLossReason(){
      updateCustomer(this.Lose).then(data=>{
        if (data.code===200){
          ElMessage.success("修改成功！！！");
          this.defer = false;
          this.$emit('refresh-data');
        }else {
          ElMessage.error('修改失败！！！');
        }
      })
    },
    //刷新
    refreshData(){
      this.loadData(true);
    },
    //删除
    deleteReprieve(row){
      console.log('row',row)
      this.$operate.remove({
        title:"删除措施",
        data: row.overview,
        executeFn: ()=>{
          delReprieve(row.id).then(data=>{
            this.loadData();
            this.$notify({
              title: '成功',
              message: '删除成功！！！',
              type: 'success',
            });
            this.fullscreenLoading = true;
            setTimeout(() => {
              this.fullscreenLoading = false
            }, 200);
          });
        }
      });
    },
    //暂缓成功
    temporary() {
      this.$confirm('此操作将暂缓流失, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      }).then(() => {
        temporary(this.Lose.id).then(data => {
          this.$emit('refresh-data');
        });
        this.$message({
          type: 'success',
          message: '暂缓成功!',
        });
        //刷新页面
        this.defer = false;
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        })
      })
    },
    //确定流失
    lose() {
      this.$confirm('此操作将确定流失, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      }).then(() => {
        lose(this.Lose.id).then(data => {
          this.$emit('refresh-data');
        });
        this.$message({
          type: 'success',
          message: '已流失!',
        });
        //刷新页面
        this.defer = false;
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        })
      })
    },
    //添加暂缓数据
    addReprieve(){
      addCustomerReprieve(this.Reprieve).then(data=>{
        if (data.code===200){
          ElMessage.success('添加成功！！！');
          this.addCustomerReprieve = false;
          this.refreshData();
        }
      })
    },
    //查询所有
    loadData(hint) {
      let params = {
        pageNum: this.no,
        pageSize: this.size,
      }
      if(hint){
        this.loading = true;
      }
      getCustomerReprievePageInfo(params).then(data => {
        console.log('data:', data)
        this.customer_reprieve = data.list;
        this.total = data.total;
        setTimeout(() => {
          this.loading = false;
        }, 2000);
      })
    },
    //分页
    init() {
      this.loadData();
    },
    currentChange(n) {
      this.no = n;
      this.loadData();
    }
  },
  /* 钩子函数 */
  created() {
    this.init();
  }
}
</script>

<style scoped>
/*暂缓*/
.defer-1{
  width: 800px;
  height: 110px;
  border: 0px solid red;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  border-radius: 20px;
}
.defer-1-1{
  width: 350px;
  border: 0px solid black;
  margin-top: 15px;
  margin-left: 10px;
  text-align: right;
  float: left;
}
.defer-1-1 span{
  padding: 0 15px;
}
/*客户流失暂缓表*/
.defer-2{
  width: 800px;
  height: 255px;
  border: 0px solid red;
  margin-top: 30px;
  background-color: rgba(255, 0, 0, 0);
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  border-radius: 20px;
}
/*添加暂缓数据*/
.add-zh{
  width: 400px;
  height: 180px;
  border: 0px solid red;
  background-color: rgba(255, 0, 0, 0);
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  border-radius: 20px;
}
.add-zh-1{
  width: 350px;
  border: 0px solid black;
  padding:15px 10px;
  text-align: right;
}
.add-zh-1 span{
  padding: 0 15px;
}
.el-select-dropdown__item{
  width: 100%;
  color: darkgray;
}
</style>